<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
  <meta charset="utf-8">
  <title>待办事宜</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
  <link rel="stylesheet" th:href="@{/adminui/dist/css/admin.css}" media="all">
  <link rel="stylesheet" th:href="@{/style/custom.css}" media="all">
</head>
<body>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto layui-form-pane" lay-filter="LAY-task-front-form">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">流程定义</label>
          <div class="layui-input-block">
            <select name="procDefKey" id="procDefKey" lay-search>
              <option value="">全部</option>
              <option th:each="map,idx:${procDefKeys}" th:value="${map.key}" th:text="${map.value}"></option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">流程实例ID</label>
          <div class="layui-input-block">
            <input type="text" name="procInstId" placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">业务流水号</label>
          <div class="layui-input-block">
            <input type="text" name="bizKey" placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
          </div>
        </div>
        <div class="layui-inline">
          <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="LAY-task-front-search">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i> 搜索
          </button>
          <button class="layui-btn layui-btn-primary layui-btn-sm" lay-submit lay-filter="LAY-task-front-reset">
            <i class="layui-icon layui-icon-refresh layuiadmin-button-btn"></i> 重置
          </button>
        </div>
      </div>
    </div>

    <div class="layui-card-body">
      <div class="layui-btn-group" style="padding-bottom: 10px;">
        <!--刷新table-->
        <button type="button" class="layui-btn layui-btn-normal btn-op-task layui-btn-sm" data-type="refresh">
          <i class="layui-icon">&#xe666;</i>刷新
        </button>
      </div>

      <!--table 定义-->
      <table id="LAY-task-table" lay-filter="LAY-task-table"></table>

      <!--列表操作项-->
      <script type="text/html" id="task-table">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail"><i class="layui-icon layui-icon-list"></i>详情</a>
        <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
      </script>
    </div>
  </div>
</div>

<script th:src="@{/layui/layui.js}"></script>
<script>
  layui.config({
    base: '/'
  }).extend({
    //设定模块别名，模块名是使用layui.模块名  模块文件是 js名字。不设置模块名 = 模块文件名
    flying: 'flying'
  }).use(['index', 'flying'], function(){
    const $ = layui.$
        ,admin = layui.admin
        ,form = layui.form
        ,table = layui.table
        ,layer = layui.layer
        ,dropdown = layui.dropdown
        ,flying = layui.flying;

    flying.table({
      elem: '#LAY-task-table',
      url: '/flow/instance/task/incomplete', //数据接口
      cols: [
        {type: 'numbers', fixed: 'left', title: '序号'}
        , {field: 'bizKey', title: '业务流水号', width: 190}
        , {field: 'name', title: '流程名称', minWidth: 150,}
        , {field: 'startUserId', title: '发起人', width: 100}
        , {field: 'taskName', title: '任务节点', minWidth: 120}
        , {field: 'createdTime', title: '创建时间', templet: '<div>{{ layui.util.toDateString(d.createdTime, "yyyy-MM-dd HH:mm:ss") }}</div>',  minWidth: 170, sort: true}
        , {field: 'claimTime', title: '领取时间', templet: '<div>{{ layui.util.toDateString(d.claimTime, "yyyy-MM-dd HH:mm:ss") }}</div>',  minWidth: 170, sort: true}
        , {field: 'duration', title: '持续时间', templet: function (d) {
            return flying.formatDuration(d.duration);
          }, width: 180}
        , {field: 'procInstId', title: '流程实例ID', minWidth: 130, hide: true}
        , {title: '操作', width: 160, align: 'center', fixed: 'right', toolbar: '#task-table'}
      ]
    });

    //监听搜索
    form.on('submit(LAY-task-front-search)', function (data) {
      let field = data.field;
      //执行重载
      table.reload('LAY-task-table', {
        where: field
      });
    });
    // 监听重置
    form.on('submit(LAY-task-front-reset)', function (data) {
      let field = data.field;
      for (let key of Object.keys(field)) {
        field[key] = '';
      }
      form.val("LAY-task-front-form", field);
    });

    //事件
    let active = {
      refresh: function () {
        let data = form.val("LAY-task-front-form");
        //执行重载 数据刷新
        table.reload('LAY-task-table', {
          where: data
        });
      }
    };

    //执行事件操作
    layui.$('.layui-btn.btn-op-task').on('click', function () {
      let type = layui.$(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

    //监听工具条
    table.on('tool(LAY-task-table)', function (obj) {
      let line_data = obj.data;

      if (obj.event === 'detail') {
        // 查看详情
        layer.open({
          type: 2
          , title: '流程详情'
          , content: '/flow/instance/turn/detail?processInstId=' + line_data.procInstId
          , area: ['60%', '100%']
          , resize: false
          , btn: ['确认', '取消']
          , btnAlign: 'r'
          , maxmin: true
          , offset: 'r'
          , anim: 'slideLeft' // 从右往左
          , yes: function (index, layero) {
            layer.close(index);
          }
          , btn2: function (index, layero) {
            layer.close(index);
          }
          , end: function () {
            //数据刷新
            table.reload('LAY-task-table');
          }
        });
      } else if (obj.event === 'more') {
        let more = new Array();
        if([[${#authorization.expression('hasAuthority("flow:his:delegate")')}]]) {
          more.push({
            title: '委派',
            id: 'delegate',
            templet: '<i class="layui-icon layui-icon-flag"></i> 委派',
            href: '#'
          })
        }
        if([[${#authorization.expression('hasAuthority("flow:task:audit")')}]]) {
          more.push({
            title: '审批',
            id: 'audit',
            templet: '<i class="layui-icon layui-icon-survey"></i> 审批',
            href: '#'
          })
        }

        //下拉菜单
        dropdown.render({
          elem: this, // 触发事件的 DOM 对象
          show: true, // 外部事件触发即显示
          align: 'left ' , // 右对齐弹出
          data: more,
          click: function (mdata) {
            if (mdata.id === "audit") {
              //提交 Ajax 成功后，更新表格中的数据
              const map = new Map()
              map.set('taskStatus', 'A')
              map.set('comment', '同意')
              // admin.req({
              //   url: '/flow/instance/task/complete'
              //   , type: 'post'
              //   , data: {"taskId": line_data.taskId, "variables": map}
              //   , done: function (res) {
              //     //执行成功
              //     layer.msg(res.msg, {icon: 1});
              //     table.reload('LAY-task-table'); //数据刷新
              //   }
              // });

              let formKey = 'sid-25A820A9-76EC-4AE1-A1BB-2D19E1D1F0CE';

              layer.open({
                type: 2
                , title: '审批'
                , content: '/flow/instance/task/audit/list?procDefKey=' + line_data.procDefKey + "&procInstId=" + line_data.procInstId + "&formKey=" + formKey
                , area: ['100%', '100%']
                , resize: false
                , btn: ['确认', '重置', '取消']
                , btnAlign: 'r'
                , maxmin: true
                , yes: function (index, layero) {
                  // let iframeWindow = window['layui-layer-iframe' + index]
                  //     , submitID = 'LAY-user-front-submit'
                  //     , submit = layero.find('iframe').contents().find('#' + submitID);
                  // submit.trigger('click');
                }
                , btn2: function (index, layero) {
                  // let reset = layero.find('iframe').contents().find('#LAY-user-front-reset');
                  // reset.trigger('click');
                  // return false; // 阻止关闭
                }
                , btn3: function (index, layero) {
                  layer.close(index);
                }
                , end: function () {
                  //数据刷新
                  table.reload('LAY-task-table');
                }
              });

            } else if (mdata.id === "delegate") { // 委派
              // 获取用户
              admin.req({
                url: '/sys/user/getSelectList',
                type: 'post',
                done: function (res) {
                  let option = '';
                  let data = res.data;
                  for (let i = 0; i < data.length; i++) {
                      option = option + '<option value="'+data[i].value+'">'+data[i].name+'</option>';
                  }
                  layer.open({
                    type: 1, // page 层类型
                    area: ['500px', '600px'],
                    title: '委托任务',
                    resize: false,
                    btn: ['确定', '取消'],
                    content: '<form class="layui-form" style="padding: 20px 30px 0 0;"><div class="layui-form-item"><div class="layui-col-xs12 layui-col-sm12 layui-col-md12"><label class="layui-form-label">代理人</label><div class="layui-input-block"><select lay-append-to="body" lay-append-position="fixed" name="assignee" lay-filter="select" lay-verify="required"><option value="">请选择</option>'+option+'</select></div></div></div><div class="layui-form-item layui-hide"><input type="button" lay-submit lay-filter="LAY-task-delegate-front-submit" id="LAY-task-delegate-front-submit" value="确认"></div></form>',
                    success: function (layero) {
                      // 定向渲染 select
                      form.render(layero.find('.layui-form select'));
                    },
                    yes: function (index, layero) {
                      let submit = layero.find('#LAY-task-delegate-front-submit');
                      form.on('submit(LAY-task-delegate-front-submit)', function (data) {
                        let field = data.field; //获取提交的字段
                        //提交 Ajax 成功后，更新表格中的数据
                        admin.req({
                          url: '/flow/instance/task/delegate'
                          , type: 'post'
                          , data: {"taskId": line_data.taskId, "assignee": field.assignee}
                          , done: function (res) {
                            layer.close(index);
                            //执行成功
                            layer.msg(res.msg, {icon: 1});
                            table.reload('LAY-task-table'); //数据刷新
                          }
                        });
                      })
                      submit.trigger('click');
                    }
                  });
                }
              });
            }
          }
        });
      }
    });
  });
</script>
</body>
</html>
